<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锅炉</title>
    <link rel="stylesheet" href="../css/normalize.css"/>
    <link rel="stylesheet" href="../css/element.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/guolu.css"/>
</head>

<body class="theme">
<div id="app" v-cloak>
    <div id="header">
        <!-- 头部导航组件 -->
        <header-nav>
            <drop-menu slot="dropMenu" :menulist="headerMenuList" deftitle="3号锅炉" sendname="num" class="header-boiler outter-top fr" type="guolu"></drop-menu>
        </header-nav>
    </div>
    <section class="main outter-top clearfix auto">
        <div class="left-side fl skin outter-right" id="left_side">
            <!-- 产用交互组件 -->
            <production-component></production-component>
            <!-- 主管压力放散组件 -->
            <pressure-component></pressure-component>
            <div class="gas" id="performance">
                <div class="gas-title outter-top  outter-bottom  clearfix">
                    <h2 class="common-title fl">
                        本班绩效
                    </h2>
                </div>
                <!--<performance :performance-msg="performanceData" v-if="Object.keys(performanceData) != ''"></performance>-->
                <div class="gas-content skin2 border">
                    <div class="achieve fl">
                        <div class=" achieve-poe">主操：{{Achievements.operator}}<span class="achiev-right"></span></div>
                        <div id="press_bar" class="barChart"></div>
                        </div>
                    <ul class="fr achiev-conent-right">
                            <li class="achiev-right-li">
                                <p class="achiev-right-text">压力稳定率</p>
                                <p class="font16">{{Achievements.stabilization|Percentage}}<span>%</span></p>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
            <div class="main-contain skin fl" id="guolu">
                <ul class="main-container border clearfix" >
                    <li class="furnace clearfix" :class="index==0?'bor-bottom':''"  v-for="(item,index) in statusChartId">
                      <div class="fl left-chart">
                        <div class="clearfix">
                            <h3 class="fl font-18">{{index|toCn}}</h3>
                            <div class="fr" >
                                <div class="pressure-legend-time fr pressure-legend1-des">
                                    <div class="fl legend-des">
                                        <span class="pressure-legend1-icon legend-icon fl"></span>
                                        <span class="fl">实际</span>
                                    </div>
                                    <div class="fl pressure-legend2-de">
                                        <span class="pressure-legend2-icon legend-icon fl"></span>

                                        <span class="fl">预测</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="furance-chart" :id="statusChartId[index]" ></div>
                      </div>  
                      <div class="fl right-data">
                        <p class="fl right-data-current" :class="[index==0&&(currentData.current_pressure>13||currentData.current_pressure<10)?'current-abnormal':'']">
                            {{index==0?'当前压力':'当前流量'}}
                            </br>
                            <span class="current-data">{{index==0?currentData.current_pressure:currentData.current_flow}}</span><span class="current-data-item-font">{{index==0?'kPa':'X10³m³/h'}}</span >
                        </p>

                          <p v-if="!currentStatus" class="fr right-data-current" :class="[index==1&&currentStatus?'current-abnormal':'']">
                              {{index==0?'平均放散开度':'无需调节'}}
                              </br>
                              <span class="current-data">{{index==0?fangsanReal:''}}</span><span class="current-data-item-font">{{index==0?'':''}}</span>
                          </p>

                        <p v-if="currentStatus" class="fr right-data-current" :class="[index==1&&currentStatus?'current-abnormal':'']">
                            {{index==0?'平均放散开度':'调节量'}}
                            </br>
                            <span class="current-data">{{index==0?fangsanReal:currentData.predict_flow}}</span><span class="current-data-item-font">{{index==0?'':'X10³m³/h'}}</span>
                        </p>
                      </div> 
                    </li>
                </ul>
                <div class="broadcast outter-top" id="myData">
                    <div class="clearfix">
                        <div class="fl">
                            <!--<h3 class="fl broadcast-font18" @click="getmessdata('my')">与我相关信息&nbsp</h3>-->
                            <h3 class="fl broadcast-font18" @click="getmessdata('all')">&nbsp全部信息</h3>
                        </div>
                        <div class="fr">
                            <p class="fl broadcast-font14 broadcast-mes active">当前(<span>{{msglist.length}}</span>)</p>
                            <p class="fl broadcast-font14 broadcast-mes"><a href="history.html?guolu" @click="setHistorydata">历史</a></p>
                        </div>
                    </div>
                    <div class="broadcast-content skin2 highlight-border" id="broadcast_content">
                        <ul class="title-list clearfix">
                            <li class="title-name w200 title-bg mr2 fl">
                                <a href="javascript:;">标题</a>
                            </li>
                            <li class="title-describe w100 title-bg mr2 fl">
                                <a href="javascript:;">发生时间</a>
                            </li>
                            <li class="title-time w120 title-bg mr2 fl">
                                <a href="javascript:;">预计产用气波动</a>
                            </li>
                            <li class="title-prediction w514 title-bg mr2 fl">
                                <a href="javascript:;">详细信息</a>
                            </li>
                            <li class="title-status w80 title-bg fl">
                                <a href="javascript:;">操作</a>
                            </li>
                        </ul>
                        <div class="contents border" id="contents">
                            <my-message :msg="msglist" v-if="msglist.length!=0"></my-message>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-side outter-left fl"   id="right-side">
                <div class="input-gas border">
                    <h3 class="common-title outter-top outter-left">锅炉调节协同台</h3>
                    <div class="main-item-right-content outter-align clearfix">
                        <p class="fl main-item-alldata-current">
                            当前用气总量
                            </br>
                            <span class="current-data">{{Number(gasCurrent)|setfive}}</span><span class="current-data-item-font">X10<sup>5</sup>m³/h</span>
                        </p>
                        <p class="fr main-item-alldata-current">
                            预计用气总量
                            </br>
                            <span class="current-data">{{Number(gasPrediction)|setfive}}</span><span class="current-data-item-font">X10<sup>5</sup>m³/h</span>
                        </p>
                    </div>
                    <div class="main-right-select outter-top clearfix">
                        <div class=" fl">
                            <div class="pressure-legend-all fl">
                                <div class="fl legend-des">
                                    <span class="pressure-legend1-all-icon legend-all-icon fl"></span>
                                    <span class="fl">实际总量</span>
                                </div>
                                <div class="fl pressure-legend2-de">
                                    <span class="pressure-legend2-all-icon legend-all-icon fl"></span>
                                    <span class="fl">预测总量</span>
                                </div>
                            </div>
                        </div>
                        <div class="fl pressure-all-data">

                            <div class="pressure-legend-all  fl">
                                <div class="fl ">
                                    <span class="pressure-legend3-all-icon legend-all-icon fl"></span>
                                    <span class="fl pad5">1</span>
                                </div>
                                <div class="fl pressure-legend2-de">
                                    <span class="pressure-legend4-all-icon legend-all-icon fl"></span>
                                    <span class="fl pad5">2</span>
                                </div>
                                <div class="fl pressure-legend2-de">
                                    <span class="pressure-legend5-all-icon legend-all-icon fl"></span>
                                    <span class="fl pad5">3</span>
                                </div>
                                <div class="fl pressure-legend2-de">
                                    <span class="pressure-legend6-all-icon legend-all-icon fl"></span>
                                    <span class="fl pad5">4</span>
                                </div>
                                <div class="fl pressure-legend2-de">
                                    <span class="pressure-legend7-all-icon legend-all-icon fl"></span>
                                    <span class="fl pad5">5</span>
                                </div>
                            </div>
                            <div class=""></div>
                        </div>
                    </div>
                    <div class="main-peak-chart" id="guolu_platform_chart"></div>
                    <div class="scroll-ball ">
                        <h3 class="font-14 main-furnace-title">所有锅炉调节情况</h3>
                        <ul class="scroll-box">
                            <li class="main-furnace border" :class="{'backgroundR':item.status==1}" v-for="(item,index) in coordination">
                                <div class="main-furnace-mess clearfix">
                                    <p class="fl main-data-furnace font16" v-if="index==0||index==1||index==2">{{item.guolu_id}}号锅炉</p>
                                    <p class="fl main-data-furnace font16" v-if="index==3||index==4">混烧{{item.guolu_id}}号锅炉</p>
                                    <div class="fr main-data-furnace-change" :class="[{'fontnormal-14':item.status==0},{'fontyellow-14':item.status==1},{'fontnormal-14':item.status==2},{'fontRed-14':item.status==3},{'fontRed-14':item.status==4}]">
                                        <p>{{item.status|toStatus}}(X10<sup>3</sup>m³/h)</p>
                                        <p ><span class="normalfont">当前调节量</span> <span :class="[{'fontRed-12':item.status==2},{'fontnormal-12':item.status==0},{'fontyellow-12':item.status==1}]">{{item.gas_use|keepTwo}}</span><span class="normalfont">预计调节量</span> <span :class="[{'fontnormal-14':item.status==0},{'fontyellow-14':item.status==1},{'fontnormal-14':item.status==2},{'fontRed-14':item.status==3},{'fontRed-14':item.status==4}]">{{item.pressure|keepTwo}}</span></p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    </section>
</div>
</body>
<script src="../js/lib/jquery-1.11.0.min.js"></script>
<script src="../js/lib/echarts.js"></script>
<script src="../js/lib/vue.min.js"></script>
<script src="../js/lib/elementUi.js"></script>
<script src="../js/lib/vue-resource.js"></script>
<script src="../js/data.js"></script>
<script src="../js/base.js"></script>
<script src="../js/common.js"></script>
<script src="../js/chart.js"></script>
<script src="../js/components.js"></script>
<script src="../js/guolu.js"></script>
</html>